<template>
  <div>
    <supertable
      element-loading-text="Loading"
      border
      class="bannertable"
      :tableData="list"
      v-loading="listLoading"
      :headerData="headerData"
      :isoperation="false"
      :ispagination="false"
      :height="1000"
      fit
      @current-change="handleCurrentChange()"
      @Delete="DeleteFn"
      @IDchange="IDchangeFn"
    >
      <template v-slot:img="row">
        <div>
          <el-image
            :src="row.row.img"
            style="width: 50px; height: auto"
          ></el-image>
        </div>
      </template>
      <template v-slot :idFile="row">
        <div>
          <el-image :src="row.row.idFile"></el-image>
        </div>
      </template>
      <template v-slot:formSolt>
        <div>
          <el-input
            style="width: 150px; font-size: 12px"
            placeholder="标题"
            v-model="listQuery.title"
            clearable
            class="bannertitle"
          >
          </el-input>
          <el-input
            style="width: 150px; font-size: 12px"
            placeholder="作者"
            v-model="listQuery.author"
            clearable
            class="bannerauthor"
          >
          </el-input>
          <el-date-picker
            v-model="rangeDate"
            size="mini"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="发布起始日期"
            end-placeholder="发布截至日期"
            value-format="yyyyMMddHHmmss"
            align="right"
          >
          </el-date-picker>
          <el-button
            type="success"
            size="mini"
            icon="el-icon-search"
            @click="search()"
            >搜索</el-button
          >
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-refresh"
            @click="reset()"
            >重置</el-button
          >
        </div>
      </template>
      <template v-slot:btnSolt>
        <div class="bannerBtn">
          <el-button
            type="success"
            size="mini"
            icon="el-icon-plus"
            @click="add()"
            >添加</el-button
          >
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeFN()"
            >删除</el-button
          >
        </div>
      </template>
    </supertable>
    <div>
      <el-dialog
        title="添加banner"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose"
        v-DragWindow
      >
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
//引入组件
import supertable from "@/components/supertable";
import { remove, getList } from "@/api/CommodityClassifications";
export default {
  name: "ArticleManagement",
  components: {
    supertable
  },
  data() {
    return {
      goodsindex: "",
      headerData: [
        {
          prop: "id",
          label: "id",
          width: "100"
        },
        {
          prop: "title",
          label: "标题",
          width: "150"
        },
        {
          prop: "createTime",
          label: "发布日期",
          width: "150"
        },
        {
          prop: "author",
          label: "作者",
          width: "150"
        },
        {
          prop: "img",
          label: "文章配图",
          width: "",
          slot: true
        }
      ],
      dialogVisible: false,
      formVisible: false,
      formTitle: "添加文章",
      deptList: [],
      isAdd: true,
      form: {
        id: "",
        title: "",
        author: "",
        createTime: "",
        img: ""
      },
      listQuery: {
        page: 1,
        limit: 20,
        title: undefined,
        author: undefined,
        startDate: undefined,
        endDate: undefined
      },
      rangeDate: undefined,
      total: 0,
      list: [],
      listLoading: true,
      selRow: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
            
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  computed: {
    rules() {
      return {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        author: [{ required: true, message: "作者不能为空", trigger: "blur" }]
      };
    }
  },
  created() {
    let _self = this;
    _self.init();
  },
  methods: {
    init() {
      let _self = this;
      _self.fetchData();
    },
    fetchData() {
      let _self = this;
      _self.listLoading = true;
      let queryData = _self.listQuery;
      if (_self.rangeDate) {
        queryData["startDate"] = _self.rangeDate[0];
        queryData["endDate"] = _self.rangeDate[1];
      }
      getList(queryData).then(response => {
        let _self = this;
        _self.list = response.data.records;
        for (var index in _self.list) {
          let item = _self.list[index];
          item.img =
            "http://localhost:9528/dev-api/file/getImgStream?idFile=" +
            item.img;
        }
        _self.listLoading = false;
        _self.total = response.data.total;
      });
    },
    search() {
      let _self = this;
      _self.listQuery.page = 1;
      _self.listQuery.title = _self.listQuery.title.trim();
      _self.listQuery.author = _self.listQuery.author.trim();
      if (_self.listQuery.title == "" || _self.listQuery.author == "") {
        _self.$message({
          message: "标题和作者都需填写",
          type: "warning"
        });
      } else {
        _self.fetchData();
      }
    //   _self.fetchData();
    },
    reset() {
      let _self = this;
      _self.listQuery.title = undefined;
      _self.listQuery.author = undefined;
      _self.listQuery.startDate = undefined;
      _self.listQuery.endDate = undefined;
      _self.rangeDate = "";
      _self.listQuery.page = 1;
      _self.fetchData();
    },
    handleClose() {},
    IDchangeFn(val) {
      console.log(val);
      let _self = this;
      _self.goodsindex = val.id;
    },
    handleCurrentChange(val) {
      let _self = this;
      _self.selRow = currentRow;
      //   console.log(_self.list.id)
      console.log(val);
    },
    add() {
      let _self = this;
      _self.$router.push({ path: "./EditPost" });
    },

    DeleteFn(val) {
      console.log(val);
      let _self = this;
      _self.goodsindex = val[0].id;
    },
    //删除
    removeFN() {
      let _self = this;
      _self
        .$confirm("此操作将永久删除, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          let _self = this;
          let data = {
            id: _self.goodsindex
          };
          remove(data).then(res => {
            console.log(res);
            if (res.code == 20000) {
              let _self = this;
              _self.fetchData();
            }
          });
          _self.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          let _self = this;
          _self.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
  // component:{组件定义名字：该组件的路径}
};
</script>
<style scoped>
.bannertitle {
  margin: 10px 10px;
  width: 400px;
}
.bannertable {
  margin: 10px;
}
.bannerBtn {
  margin: 10px;
}
.el-image {
  width: 200px;
  height: 100px;
}
</style>
